<style scoped>
.save-category /deep/ .el-dialog__body {
  padding-bottom: 10px;
}
.save-category /deep/ .el-form-item {
  margin-bottom: 15px;
}
</style>
<!--  -->
<template>
  <div class="save-category">
    <el-dialog :title="title" :visible.sync="dialogVisible" width="490px" @closed="close" :close-on-click-modal="false">
      <el-form :model="category" v-loading="loading" :rules="rules" ref="categoryForm" label-width="80px">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="category.name" autocomplete="off" style="width: 370px;" placeholder="输入小于100个字符的分类名称" size="medium">
          </el-input>
        </el-form-item>

        <el-form-item label="分类级别" prop="parentId">
          <el-select v-model="category.parentId" placeholder="选择分类级别" size="medium" style="width: 370px;">
            <el-option label="顶级" :value="0"></el-option>
            <template v-for="cate in categories[0]">
              <el-option style="padding-left:36px;" v-if="category.id == 0 || category.id != cate.id" :key="cate.id"
                :label="cate.name" :value="cate.id"></el-option>
              <template v-for="cat in categories[cate.id]">
                <el-option style="padding-left:48px;" v-if="category.id == 0 || category.id != cat.id" :key="cat.id"
                  :label="' - '+cat.name" :value="cat.id"></el-option>
              </template>
            </template>
          </el-select>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    resetData: {
      type: Function
    }
  },
  data () {
    var checkName = (rule, value, callback) => {
      if (value.trim() === '') {
        callback(new Error('分类名称不能都为空格'))
      } else {
        callback()
      }
    }
    return {
      title: '',
      loading: false,
      dialogVisible: false,
      category: {},
      categories: [],
      rules: {
        name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在1到100个字符', trigger: 'blur' },
          { validator: checkName, trigger: 'blur' }
        ],
        parentId: [
          { required: true, message: '请选择分类级别', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    create (title, system) {
      if (!system || !system.id) {
        return
      }
      this.title = title
      this.dialogVisible = true
      // 获取系统分类
      this.loading = true
      this.$post('/category/table-data-infos-by-system-id', { systemId: system.id }).then((resoponse) => {
        this.loading = false
        if (resoponse.categories) {
          this.categories = resoponse.categories
        } else {
          this.categories = []
        }
      }, () => {
        this.loading = false
      })
      this.category = {
        id: 0,
        name: '',
        systemId: system.id,
        parentId: 0
      }
    },
    edit (title, system, category) {
      if (!system || !system.id) {
        return
      }
      this.title = title
      this.dialogVisible = true
      // 获取系统分类
      this.loading = true
      this.$post('/category/table-data-infos-by-system-id', { systemId: system.id }).then((resoponse) => {
        this.loading = false
        if (resoponse.categories) {
          this.categories = resoponse.categories
        } else {
          this.categories = []
        }
      }, () => {
        this.loading = false
      })
      this.category = JSON.parse(JSON.stringify(category))
    },
    hidden () {
      this.dialogVisible = false
    },
    close () {
      if (this.$refs['categoryForm']) {
        this.$refs['categoryForm'].clearValidate()
      }
      this.category = {}
      this.categories = []
      this.dialogVisible = false
    },
    save () {
      if (this.loading) {
        return
      }
      this.$refs['categoryForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.category.name = this.category.name.trim()
          this.$jpost('/category/save', this.category).then(response => {
            if (response && response.id) {
              this.dialogVisible = false
              this.category = {}
              this.categories = []
              this.loading = false
              this.resetData()
            }
          })
        }
        return false
      })
    }
  }
}

</script>
